<!-- 贪吃蛇游戏组件 - 增强版 -->
<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'

// 游戏配置
const config = {
  gridSize: 20, // 网格大小
  cellSize: 25, // 单元格大小 (增大以便更好地展示视觉效果)
  initialSpeed: 150, // 初始速度（毫秒）
  speedIncrease: 5, // 每次加速减少的毫秒数
}

// 游戏状态
const snake = ref<{ x: number; y: number }[]>([
  { x: 10, y: 10 },
  { x: 9, y: 10 },
  { x: 8, y: 10 },
])
const food = ref<{ x: number; y: number }>({ x: 15, y: 10 })
const foodType = ref<'normal' | 'special'>(Math.random() > 0.7 ? 'special' : 'normal') // 添加特殊食物
const direction = ref<'up' | 'down' | 'left' | 'right'>('right')
const nextDirection = ref<'up' | 'down' | 'left' | 'right'>('right')
const score = ref(0)
const highScore = ref(0)
const gameOver = ref(false)
const gameStarted = ref(false)
const gameSpeed = ref(config.initialSpeed)
const gameLevel = computed(() => Math.floor(score.value / 10) + 1)
let gameLoop: number | null = null
let foodTimer: number | null = null

// 创建画布引用
const canvasRef = ref<HTMLCanvasElement | null>(null)

// 颜色主题
const colors = {
  primary: '#4CAF50',
  secondary: '#FF9800',
  accent: '#E91E63',
  background: '#121212',
  surface: '#1E1E1E',
  text: '#FFFFFF',
  grid: '#2C2C2C',
  snake: {
    head: '#4CAF50',
    body: '#8BC34A',
    tail: '#CDDC39',
  },
  food: {
    normal: '#FF5252',
    special: '#FFEB3B',
  },
}

// 生成新食物
function generateFood() {
  let newFood: { x: number; y: number }
  let overlapping: boolean

  do {
    overlapping = false
    newFood = {
      x: Math.floor(Math.random() * config.gridSize),
      y: Math.floor(Math.random() * config.gridSize),
    }

    // 检查食物是否与蛇身重叠
    for (const segment of snake.value) {
      if (segment.x === newFood.x && segment.y === newFood.y) {
        overlapping = true
        break
      }
    }
  } while (overlapping)

  food.value = newFood
  // 20% 概率生成特殊食物
  foodType.value = Math.random() > 0.8 ? 'special' : 'normal'

  // 设置特殊食物计时器，10秒后变回普通食物
  if (foodType.value === 'special') {
    if (foodTimer) {
      clearTimeout(foodTimer)
    }
    foodTimer = setTimeout(() => {
      if (foodType.value === 'special') {
        foodType.value = 'normal'
      }
    }, 10000)
  }
}

// 移动蛇
function moveSnake() {
  if (gameOver.value) return

  // 更新方向
  direction.value = nextDirection.value

  // 创建新的头部
  const head = { ...snake.value[0] }

  // 根据方向移动头部
  switch (direction.value) {
    case 'up':
      head.y = (head.y - 1 + config.gridSize) % config.gridSize
      break
    case 'down':
      head.y = (head.y + 1) % config.gridSize
      break
    case 'left':
      head.x = (head.x - 1 + config.gridSize) % config.gridSize
      break
    case 'right':
      head.x = (head.x + 1) % config.gridSize
      break
  }

  // 检查是否吃到食物
  let foodEaten = false
  if (head.x === food.value.x && head.y === food.value.y) {
    foodEaten = true
    // 根据食物类型加分
    if (foodType.value === 'special') {
      score.value += 5 // 特殊食物得5分
    } else {
      score.value += 1 // 普通食物得1分
    }

    // 更新最高分
    if (score.value > highScore.value) {
      highScore.value = score.value
    }

    // 生成新食物
    generateFood()

    // 加速游戏
    gameSpeed.value = Math.max(50, gameSpeed.value - config.speedIncrease)
    if (gameLoop) {
      clearInterval(gameLoop)
      gameLoop = setInterval(gameTick, gameSpeed.value)
    }
  } else {
    // 没吃到食物，删除尾部
    snake.value.pop()
  }

  // 检查是否撞到自己
  for (let i = 0; i < snake.value.length; i++) {
    if (snake.value[i].x === head.x && snake.value[i].y === head.y) {
      gameOver.value = true
      if (gameLoop) {
        clearInterval(gameLoop)
        gameLoop = null
      }
      if (foodTimer) {
        clearTimeout(foodTimer)
        foodTimer = null
      }
      break
    }
  }

  // 添加新头部
  if (!gameOver.value) {
    snake.value.unshift(head)
  }

  // 渲染游戏
  drawGame(foodEaten)
}

// 渲染游戏
function drawGame(foodEaten = false) {
  const canvas = canvasRef.value
  if (!canvas) return

  const ctx = canvas.getContext('2d')
  if (!ctx) return

  // 清空画布 - 使用渐变背景
  const bgGradient = ctx.createLinearGradient(0, 0, 0, canvas.height)
  bgGradient.addColorStop(0, colors.background)
  bgGradient.addColorStop(1, colors.surface)
  ctx.fillStyle = bgGradient
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  // 绘制网格线 - 使用更细的线条
  ctx.strokeStyle = colors.grid
  ctx.lineWidth = 0.5
  for (let i = 0; i <= config.gridSize; i++) {
    ctx.beginPath()
    ctx.moveTo(i * config.cellSize, 0)
    ctx.lineTo(i * config.cellSize, canvas.height)
    ctx.stroke()

    ctx.beginPath()
    ctx.moveTo(0, i * config.cellSize)
    ctx.lineTo(canvas.width, i * config.cellSize)
    ctx.stroke()
  }

  // 绘制食物 - 特殊食物闪烁效果
  if (foodType.value === 'special') {
    // 特殊食物 - 圆形带光晕效果
    ctx.beginPath()
    ctx.arc(
      food.value.x * config.cellSize + config.cellSize / 2,
      food.value.y * config.cellSize + config.cellSize / 2,
      config.cellSize / 3,
      0,
      Math.PI * 2,
    )

    // 创建径向渐变
    const foodGradient = ctx.createRadialGradient(
      food.value.x * config.cellSize + config.cellSize / 2 - config.cellSize / 10,
      food.value.y * config.cellSize + config.cellSize / 10,
      0,
      food.value.x * config.cellSize + config.cellSize / 2,
      food.value.y * config.cellSize + config.cellSize / 2,
      config.cellSize / 3,
    )
    foodGradient.addColorStop(0, '#FFFF55')
    foodGradient.addColorStop(1, colors.food.special)
    ctx.fillStyle = foodGradient
    ctx.fill()

    // 添加脉动效果
    ctx.beginPath()
    ctx.arc(
      food.value.x * config.cellSize + config.cellSize / 2,
      food.value.y * config.cellSize + config.cellSize / 2,
      config.cellSize / 2.5,
      0,
      Math.PI * 2,
    )
    ctx.strokeStyle = colors.food.special
    ctx.lineWidth = 2
    ctx.stroke()
  } else {
    // 普通食物 - 苹果形状
    ctx.beginPath()
    ctx.arc(
      food.value.x * config.cellSize + config.cellSize / 2,
      food.value.y * config.cellSize + config.cellSize / 2,
      config.cellSize / 3,
      0,
      Math.PI * 2,
    )
    ctx.fillStyle = colors.food.normal
    ctx.fill()

    // 添加食物光泽
    ctx.beginPath()
    ctx.arc(
      food.value.x * config.cellSize + config.cellSize / 2 - config.cellSize / 10,
      food.value.y * config.cellSize + config.cellSize / 10,
      config.cellSize / 10,
      0,
      Math.PI * 2,
    )
    ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
    ctx.fill()
  }

  // 绘制蛇身 - 使用渐变和渐变颜色
  for (let i = snake.value.length - 1; i > 0; i--) {
    const segment = snake.value[i]
    // const prevSegment = snake.value[i - 1]  // 暂时不需要
    // const nextSegment = i < snake.value.length - 1 ? snake.value[i + 1] : null  // 暂时不需要

    // 根据位置计算颜色（身体到尾部的渐变）
    const colorRatio = 1 - i / snake.value.length
    const r = Math.floor(
      colors.snake.tail.split('')[1] === '#'
        ? parseInt(colors.snake.tail.slice(1, 3), 16) * (1 - colorRatio) +
            parseInt(colors.snake.body.slice(1, 3), 16) * colorRatio
        : 205 * (1 - colorRatio) + 139 * colorRatio,
    )
    const g = Math.floor(
      colors.snake.tail.split('')[1] === '#'
        ? parseInt(colors.snake.tail.slice(3, 5), 16) * (1 - colorRatio) +
            parseInt(colors.snake.body.slice(3, 5), 16) * colorRatio
        : 220 * (1 - colorRatio) + 195 * colorRatio,
    )
    const b = Math.floor(
      colors.snake.tail.split('')[1] === '#'
        ? parseInt(colors.snake.tail.slice(5, 7), 16) * (1 - colorRatio) +
            parseInt(colors.snake.body.slice(5, 7), 16) * colorRatio
        : 57 * (1 - colorRatio) + 74 * colorRatio,
    )
    const segmentColor = `rgb(${r}, ${g}, ${b})`

    // 蛇身体部分 - 圆角矩形
    ctx.fillStyle = segmentColor
    const radius = config.cellSize / 4
    const x = segment.x * config.cellSize + 2
    const y = segment.y * config.cellSize + 2
    const width = config.cellSize - 4
    const height = config.cellSize - 4

    ctx.beginPath()
    ctx.moveTo(x + radius, y)
    ctx.arcTo(x + width, y, x + width, y + height, radius)
    ctx.arcTo(x + width, y + height, x, y + height, radius)
    ctx.arcTo(x, y + height, x, y, radius)
    ctx.arcTo(x, y, x + width, y, radius)
    ctx.closePath()
    ctx.fill()

    // 添加身体高光
    ctx.fillStyle = `rgba(255, 255, 255, 0.2)`
    ctx.beginPath()
    ctx.arc(x + width / 2 - width / 4, y + height / 4, width / 8, 0, Math.PI * 2)
    ctx.fill()
  }

  // 绘制蛇头 - 带眼睛的圆形
  const head = snake.value[0]
  const headX = head.x * config.cellSize + 3
  const headY = head.y * config.cellSize + 3
  const headWidth = config.cellSize - 6
  const headHeight = config.cellSize - 6

  // 创建头部渐变
  const headGradient = ctx.createLinearGradient(headX, headY, headX + headWidth, headY + headHeight)
  headGradient.addColorStop(0, colors.snake.head)
  headGradient.addColorStop(1, colors.snake.body)

  // 蛇头主体
  ctx.fillStyle = headGradient
  ctx.beginPath()
  ctx.moveTo(headX + headWidth / 2, headY)
  ctx.arcTo(headX + headWidth, headY, headX + headWidth, headY + headHeight, headWidth / 4)
  ctx.arcTo(headX + headWidth, headY + headHeight, headX, headY + headHeight, headWidth / 4)
  ctx.arcTo(headX, headY + headHeight, headX, headY, headWidth / 4)
  ctx.arcTo(headX, headY, headX + headWidth, headY, headWidth / 4)
  ctx.closePath()
  ctx.fill()

  // 添加头部高光
  ctx.fillStyle = `rgba(255, 255, 255, 0.3)`
  ctx.beginPath()
  ctx.arc(headX + headWidth / 3, headY + headHeight / 3, headWidth / 8, 0, Math.PI * 2)
  ctx.fill()

  // 绘制眼睛 - 根据方向调整位置
  ctx.fillStyle = '#FFFFFF'
  let leftEyeX, leftEyeY, rightEyeX, rightEyeY

  switch (direction.value) {
    case 'right':
      leftEyeX = headX + headWidth * 0.6
      leftEyeY = headY + headHeight * 0.4
      rightEyeX = headX + headWidth * 0.6
      rightEyeY = headY + headHeight * 0.6
      break
    case 'left':
      leftEyeX = headX + headWidth * 0.4
      leftEyeY = headY + headHeight * 0.4
      rightEyeX = headX + headWidth * 0.4
      rightEyeY = headY + headHeight * 0.6
      break
    case 'up':
      leftEyeX = headX + headWidth * 0.4
      leftEyeY = headY + headHeight * 0.4
      rightEyeX = headX + headWidth * 0.6
      rightEyeY = headY + headHeight * 0.4
      break
    case 'down':
      leftEyeX = headX + headWidth * 0.4
      leftEyeY = headY + headHeight * 0.6
      rightEyeX = headX + headWidth * 0.6
      rightEyeY = headY + headHeight * 0.6
      break
  }

  // 白色眼白
  ctx.beginPath()
  ctx.arc(leftEyeX, leftEyeY, headWidth / 10, 0, Math.PI * 2)
  ctx.arc(rightEyeX, rightEyeY, headWidth / 10, 0, Math.PI * 2)
  ctx.fill()

  // 黑色眼珠
  ctx.fillStyle = '#000000'
  ctx.beginPath()
  ctx.arc(
    leftEyeX + (direction.value === 'right' ? 1 : direction.value === 'left' ? -1 : 0),
    leftEyeY + (direction.value === 'down' ? 1 : direction.value === 'up' ? -1 : 0),
    headWidth / 20,
    0,
    Math.PI * 2,
  )
  ctx.arc(
    rightEyeX + (direction.value === 'right' ? 1 : direction.value === 'left' ? -1 : 0),
    rightEyeY + (direction.value === 'down' ? 1 : direction.value === 'up' ? -1 : 0),
    headWidth / 20,
    0,
    Math.PI * 2,
  )
  ctx.fill()

  // 吃到食物的动画效果
  if (foodEaten) {
    ctx.fillStyle = 'rgba(255, 255, 255, 0.6)'
    ctx.beginPath()
    ctx.arc(
      food.value.x * config.cellSize + config.cellSize / 2,
      food.value.y * config.cellSize + config.cellSize / 2,
      config.cellSize / 2,
      0,
      Math.PI * 2,
    )
    ctx.fill()
  }

  // 如果游戏结束，显示游戏结束信息
  if (gameOver.value) {
    // 半透明黑色背景
    ctx.fillStyle = 'rgba(0, 0, 0, 0.8)'
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    // 创建文字渐变
    const textGradient = ctx.createLinearGradient(0, canvas.height / 2 - 50, 0, canvas.height / 2)
    textGradient.addColorStop(0, colors.accent)
    textGradient.addColorStop(1, colors.secondary)

    // 游戏结束标题
    ctx.fillStyle = textGradient
    ctx.font = 'bold 32px "Arial", sans-serif'
    ctx.textAlign = 'center'
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'
    ctx.shadowBlur = 10
    ctx.shadowOffsetX = 0
    ctx.shadowOffsetY = 2
    ctx.fillText('游戏结束！', canvas.width / 2, canvas.height / 2 - 30)

    // 重置阴影
    ctx.shadowColor = 'transparent'
    ctx.shadowBlur = 0

    // 得分信息
    ctx.fillStyle = colors.text
    ctx.font = '20px "Arial", sans-serif'
    ctx.fillText(`最终得分: ${score.value}`, canvas.width / 2, canvas.height / 2 + 10)
    ctx.fillText(`最高纪录: ${highScore.value}`, canvas.width / 2, canvas.height / 2 + 40)

    // 重启提示
    ctx.fillStyle = colors.secondary
    ctx.font = '18px "Arial", sans-serif'
    ctx.fillText('按空格重新开始', canvas.width / 2, canvas.height / 2 + 80)
  }

  // 如果游戏未开始，显示开始提示
  if (!gameStarted.value && !gameOver.value) {
    // 半透明黑色背景
    ctx.fillStyle = 'rgba(0, 0, 0, 0.8)'
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    // 创建标题渐变
    const titleGradient = ctx.createLinearGradient(
      0,
      canvas.height / 2 - 100,
      0,
      canvas.height / 2 - 50,
    )
    titleGradient.addColorStop(0, colors.primary)
    titleGradient.addColorStop(1, colors.secondary)

    // 游戏标题
    ctx.fillStyle = titleGradient
    ctx.font = 'bold 36px "Arial", sans-serif'
    ctx.textAlign = 'center'
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'
    ctx.shadowBlur = 10
    ctx.shadowOffsetX = 0
    ctx.shadowOffsetY = 3
    ctx.fillText('贪吃蛇游戏', canvas.width / 2, canvas.height / 2 - 60)

    // 重置阴影
    ctx.shadowColor = 'transparent'
    ctx.shadowBlur = 0

    // 游戏说明
    ctx.fillStyle = colors.text
    ctx.font = '16px "Arial", sans-serif'
    ctx.fillText('使用方向键控制蛇的移动', canvas.width / 2, canvas.height / 2)
    ctx.fillText('吃到普通食物得1分，特殊食物得5分', canvas.width / 2, canvas.height / 2 + 30)
    ctx.fillText('游戏会随着得分增加而加快速度', canvas.width / 2, canvas.height / 2 + 60)

    // 开始按钮样式的文字
    ctx.fillStyle = colors.primary
    ctx.font = 'bold 20px "Arial", sans-serif'
    ctx.fillText('按空格开始游戏', canvas.width / 2, canvas.height / 2 + 110)
  }
}

// 游戏主循环
function gameTick() {
  moveSnake()
}

// 开始游戏
function startGame() {
  if (gameLoop) {
    clearInterval(gameLoop)
    gameLoop = null
  }
  if (foodTimer) {
    clearTimeout(foodTimer)
    foodTimer = null
  }

  // 重置游戏状态
  snake.value = [
    { x: 10, y: 10 },
    { x: 9, y: 10 },
    { x: 8, y: 10 },
  ]
  direction.value = 'right'
  nextDirection.value = 'right'
  score.value = 0
  gameOver.value = false
  gameStarted.value = true
  gameSpeed.value = config.initialSpeed
  generateFood()

  // 开始游戏循环
  gameLoop = setInterval(gameTick, gameSpeed.value)
}

// 处理键盘输入
function handleKeyPress(event: KeyboardEvent) {
  if (event.repeat) return

  switch (event.key) {
    case 'ArrowUp':
      if (direction.value !== 'down') {
        nextDirection.value = 'up'
      }
      break
    case 'ArrowDown':
      if (direction.value !== 'up') {
        nextDirection.value = 'down'
      }
      break
    case 'ArrowLeft':
      if (direction.value !== 'right') {
        nextDirection.value = 'left'
      }
      break
    case 'ArrowRight':
      if (direction.value !== 'left') {
        nextDirection.value = 'right'
      }
      break
    case ' ': // 空格键
      if (!gameStarted.value || gameOver.value) {
        startGame()
      }
      break
  }
}

// 组件挂载时
onMounted(() => {
  // 初始化画布大小
  const canvas = canvasRef.value
  if (canvas) {
    canvas.width = config.gridSize * config.cellSize
    canvas.height = config.gridSize * config.cellSize
  }

  // 绘制初始画面
  drawGame()

  // 添加键盘监听
  window.addEventListener('keydown', handleKeyPress)
})

// 组件卸载时
onUnmounted(() => {
  // 清除游戏循环
  if (gameLoop) {
    clearInterval(gameLoop)
    gameLoop = null
  }
  if (foodTimer) {
    clearTimeout(foodTimer)
    foodTimer = null
  }

  // 移除键盘监听
  window.removeEventListener('keydown', handleKeyPress)
})
</script>

<template>
  <div class="snake-game-container">
    <div class="game-header">
      <h2 class="game-title">贪吃蛇游戏</h2>
      <div class="game-stats">
        <div class="stat-item">
          <span class="stat-label">得分:</span>
          <span class="stat-value score">{{ score }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">最高:</span>
          <span class="stat-value high-score">{{ highScore }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">等级:</span>
          <span class="stat-value level">{{ gameLevel }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">速度:</span>
          <span class="stat-value speed">{{ Math.round(1000 / gameSpeed) }}步/秒</span>
        </div>
      </div>
    </div>

    <div class="game-wrapper">
      <canvas ref="canvasRef" class="game-canvas" tabindex="0"></canvas>

      <!-- 游戏按钮 -->
      <div class="game-controls" v-if="!gameStarted || gameOver">
        <button class="start-button" @click="startGame">
          {{ gameStarted ? '重新开始' : '开始游戏' }}
        </button>
      </div>
    </div>

    <div class="game-info">
      <div class="food-info">
        <div class="food-type normal">
          <div class="food-icon normal"></div>
          <span>普通食物: +1分</span>
        </div>
        <div class="food-type special">
          <div class="food-icon special"></div>
          <span>特殊食物: +5分 (限时出现)</span>
        </div>
      </div>

      <div class="game-instructions">
        <h3>游戏说明</h3>
        <ul>
          <li>使用方向键控制蛇的移动方向</li>
          <li>按空格键开始/重新开始游戏</li>
          <li>蛇可以穿过墙壁到达对面</li>
          <li>吃到自己的身体游戏结束</li>
          <li>随着得分增加，游戏速度会逐渐加快</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 全局动画 */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes glow {
  0% {
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.7);
  }
  50% {
    box-shadow:
      0 0 20px rgba(76, 175, 80, 0.9),
      0 0 30px rgba(76, 175, 80, 0.6);
  }
  100% {
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.7);
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* 主要容器样式 */
.snake-game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  background: linear-gradient(135deg, #121212 0%, #1e1e1e 100%);
  font-family: 'Arial', sans-serif;
  color: #ffffff;
}

/* 游戏头部 */
.game-header {
  text-align: center;
  margin-bottom: 30px;
}

.game-title {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 20px;
  background: linear-gradient(45deg, #4caf50, #ff9800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  animation: float 3s ease-in-out infinite;
}

/* 游戏统计信息 */
.game-stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 15px 25px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 0.9rem;
  color: #b0b0b0;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 0 0 10px currentColor;
}

.stat-value.score {
  color: #4caf50;
}

.stat-value.high-score {
  color: #ffeb3b;
}

.stat-value.level {
  color: #2196f3;
}

.stat-value.speed {
  color: #ff9800;
}

/* 游戏区域包装器 */
.game-wrapper {
  position: relative;
  margin-bottom: 30px;
}

/* 游戏画布 */
.game-canvas {
  border-radius: 15px;
  box-shadow:
    0 0 20px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(76, 175, 80, 0.3);
  outline: none;
  cursor: pointer;
  border: 3px solid;
  border-image: linear-gradient(45deg, #4caf50, #ff9800) 1;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.game-canvas:hover {
  transform: scale(1.02);
  animation: glow 2s ease-in-out infinite;
}

/* 游戏控制按钮 */
.game-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.start-button {
  padding: 15px 40px;
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
  background: linear-gradient(45deg, #4caf50, #8bc34a);
  border: none;
  border-radius: 30px;
  cursor: pointer;
  box-shadow:
    0 4px 15px rgba(76, 175, 80, 0.5),
    0 0 20px rgba(76, 175, 80, 0.3);
  transition: all 0.3s ease;
  animation: pulse 2s infinite;
}

.start-button:hover {
  transform: scale(1.05);
  box-shadow:
    0 6px 20px rgba(76, 175, 80, 0.7),
    0 0 30px rgba(76, 175, 80, 0.5);
}

.start-button:active {
  transform: scale(0.98);
}

/* 游戏信息区域 */
.game-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
}

/* 食物信息 */
.food-info {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.food-type {
  display: flex;
  align-items: center;
  gap: 10px;
}

.food-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.food-icon.normal {
  background: #ff5252;
  box-shadow: 0 0 10px rgba(255, 82, 82, 0.7);
}

.food-icon.special {
  background: #ffeb3b;
  box-shadow: 0 0 15px rgba(255, 235, 59, 0.9);
  animation: pulse 1.5s infinite;
}

/* 游戏说明 */
.game-instructions {
  padding: 25px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.game-instructions h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #4caf50;
  font-size: 1.3rem;
  text-align: center;
}

.game-instructions ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.game-instructions li {
  padding: 8px 0;
  padding-left: 25px;
  position: relative;
}

.game-instructions li:before {
  content: '▶';
  position: absolute;
  left: 0;
  color: #ff9800;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .game-title {
    font-size: 2.2rem;
  }

  .game-stats {
    flex-wrap: wrap;
    gap: 15px;
    max-width: 400px;
  }

  .stat-item {
    flex: 1 1 40%;
  }

  .food-info {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .game-canvas {
    max-width: 100%;
    height: auto;
  }
}
</style>
